<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="商家名" v-model="listQuery.sellerName">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户ID" v-model="listQuery.userId">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="电话" v-model="listQuery.phone">
      </el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <!--<el-button class="filter-item" type="primary" :loading="downloadLoading"  icon="el-icon-download" @click="">导出</el-button>-->
    </div>

    <el-table :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row >
      <el-table-column class-name="status-col" label="是否审核" width="90" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.checkOrder | statusFilter">{{scope.row.checkOrder === 0 ? '未审核' : '已审核'}}</el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label='排序ID' width="70">
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>-->
      <el-table-column label="订单ID" width="80" align="center">
        <template slot-scope="scope">
          {{scope.row.userOrderId}}
        </template>
      </el-table-column>
      <el-table-column label="商家名" width="180" align="center">
      <template slot-scope="scope">
        {{scope.row.sellerName}}
      </template>
      </el-table-column>
      <el-table-column label="用户ID" width="80" align="center">
        <template slot-scope="scope">
          {{scope.row.userId}}
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="电话" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>
      <el-table-column label="房费" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.roomCost}}
        </template>
      </el-table-column>
      <el-table-column label="酒水" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.wine}}
        </template>
      </el-table-column>
      <el-table-column label="其他" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.other}}
        </template>
      </el-table-column>
      <el-table-column label="赠送" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.give}}
        </template>
      </el-table-column>
      <el-table-column label="折扣" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.discount}}
        </template>
      </el-table-column>
      <el-table-column label="合计" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.total}}
        </template>
      </el-table-column>
      <el-table-column label="订单利润" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.levelProfit}}
        </template>
      </el-table-column>
      <el-table-column label="现金支付" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.cashPay}}
        </template>
      </el-table-column>
      <!--<el-table-column label="积分" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.integralPay}}
        </template>
      </el-table-column>-->
      <el-table-column label="总金额" width="85" align="center">
        <template slot-scope="scope">
          {{scope.row.money}}
        </template>
      </el-table-column>
      <el-table-column label="结账时间" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.payTime}}
        </template>
      </el-table-column>

      <el-table-column  label="操作"  align="center" width="200">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.checkOrder === 1" type="danger" @click="handleUpdate(scope.row)" size="mini">审核账单</el-button>
          <el-button :disabled="scope.row.checkOrder === 1" type="danger" @click="updateOrder(scope.row)" size="mini">修改账单</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div style="padding-top: 15px;text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes="[10, 20, 30]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=totals>
      </el-pagination>
    </div>

    <el-dialog title="审核账单信息" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="是否审核：">
          <el-select class="filter-item"  v-model="temp.checkOrder" placeholder="请选择">
            <el-option
              v-for="item in checkOrder"
              :key="item.val"
              :label="item.checkOrder"
              :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogFormVisible = false">取消</el-button>
        <el-button  :loading="buttonLoading" type="primary" @click="updateData">确认审核</el-button>
      </div>
    </el-dialog>

    <el-dialog  title="修改账单信息" :visible.sync="dialogPayVisible">
      <el-form ref="dataForm" :rules="rules"  :model="temp"  label-position="right" label-width="80px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="订单ID" prop="userOrderId">
          <el-input v-model="temp.userOrderId" disabled></el-input>
        </el-form-item>
        <el-form-item label="商家名" prop="sellerName">
          <el-input v-model="temp.sellerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="temp.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="temp.userName" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="temp.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="房费" prop="roomCost">
          <el-input v-model="temp.roomCost"></el-input>
        </el-form-item>
        <el-form-item label="酒水" prop="wine">
          <el-input v-model="temp.wine"></el-input>
        </el-form-item>
        <el-form-item label="其他" prop="other">
          <el-input v-model="temp.other"></el-input>
        </el-form-item>
        <el-form-item label="赠送" prop="give">
          <el-input v-model="temp.give"></el-input>
        </el-form-item>
        <el-form-item label="折扣" prop="discount">
          <el-input v-model="temp.discount"></el-input>
        </el-form-item>
        <el-form-item label="合计" prop="total">
          <el-input v-model="temp.total"></el-input>
        </el-form-item>
        <el-form-item label="订单利润" prop="levelProfit">
          <el-input v-model="temp.levelProfit"></el-input>
        </el-form-item>
        <el-form-item label="现金支付" prop="cashPay">
          <el-input v-model="temp.cashPay"></el-input>
        </el-form-item>
        <!--<el-form-item label="积分" prop="integralPay">
          <el-input v-model="temp.integralPay"></el-input>
        </el-form-item>-->
        <el-form-item label="总金额" prop="money">
          <el-input v-model="temp.money"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogPayVisible = false">取消</el-button>
        <el-button  :loading="buttonLoading"  type="primary" @click="updateOrderData">确认修改</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<style>

  .filter-container{
    padding-bottom: 20px;
  }

</style>

<script>
import { List, Merge } from '../../api/checkOrder'
import { splice } from '../../utils/common'

export default {

  data() {
    return {
      list: [],
      listLoading: true,
      buttonLoading: false,
      listQuery: {
        sellerName: null,
        userId: null,
        phone: null
      },
      temp: {
        avatar: '',
        userName: '',
        phone: '',
        pid: '',
        sellerName: '',
        userOrderId: '',
        userId: '',
        sellerId: '',
        payTime: '',
        content: '',
        money: '',
        payStatus: '',
        integralPay: '',
        cashPay: '',
        info: '',
        isPass: '',
        checkOrder: '',
        orderTime: '',
        levelProfit: '',
        createTime: '',
        updateTime: '',
        roomCost: '',
        wine: '',
        other: '',
        give: '',
        discount: '',
        total: ''
      },
      dialogFormVisible: false,
      dialogPayVisible: false,
      dialogStatus: '',
      downloadLoading: false,
      checkOrder: [
        { checkOrder: '未审核', val: 0 },
        { checkOrder: '已审核', val: 1 }
      ],
      rules: {
        avatar: [{ required: true }],
        userName: [{ required: true }],
        phone: [{ required: true }],
        pid: [{ required: true }],
        sellerName: [{ required: true }],
        userOrderId: [{ required: true }],
        userId: [{ required: true }],
        sellerId: [{ required: true }],
        payTime: [{ required: true }],
        content: [{ required: true }],
        money: [{ required: true }],
        payStatus: [{ required: true }],
        integralPay: [{ required: true }],
        cashPay: [{ required: true }],
        info: [{ required: true }],
        isPass: [{ required: true }],
        checkOrder: [{ required: true }],
        orderTime: [{ required: true }],
        levelProfit: [{ required: true }],
        createTime: [{ required: true }],
        updateTime: [{ required: true }],
        roomCost: [{ required: true }],
        wine: [{ required: true }],
        other: [{ required: true }],
        give: [{ required: true }],
        discount: [{ required: true }],
        total: [{ required: true }]
      },
      totals: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        // draft: 'gray',
        0: 'warning'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleFilter() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      List(this.listQuery.sellerName, this.listQuery.userId, this.listQuery.phone).then(response => {
        this.list = response.data
        this.totals = response.data.length
        this.currentPage = 1
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleUpdate(row) {
      alert('温馨提示：审核成功后将以短信的形式通知用户消费后的情况，请仔细审核操作！')
      this.resetTemp()
      this.temp = splice(this.temp, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          Merge(this.temp).then(res => {
            this.temp = res.data
            for (const v of this.list) {
              if (this.temp.userOrderId === v.userOrderId) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.temp)
                break
              }
            }
            this.dialogFormVisible = false
            this.buttonLoading = false
            this.fetchData()
            this.$notify({
              title: '成功',
              message: '审核成功！',
              type: 'success',
              duration: 2000
            })
          }).catch(reason => {
            console.log(reason)
            this.buttonLoading = false
          })
        }
      })
    },
    updateOrder(row) {
      alert('温馨提示：请仔细核对账单后再操作修改！')
      this.resetTemp()
      this.temp = splice(this.temp, row)
      this.dialogStatus = 'update'
      this.dialogPayVisible = true
    },
    updateOrderData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          Merge(this.temp).then(res => {
            this.temp = res.data
            for (const v of this.list) {
              if (this.temp.userOrderId === v.userOrderId) {
                const index = this.list.indexOf(v)
                this.list.splice(index, 1, this.temp)
                break
              }
            }
            this.dialogPayVisible = false
            this.buttonLoading = false
            this.fetchData()
            this.$notify({
              title: '成功',
              message: '修改成功！',
              type: 'success',
              duration: 2000
            })
          }).catch(reason => {
            console.log(reason)
            this.buttonLoading = false
          })
        }
      })
    },
    resetTemp() {
      this.temp = {
        avatar: '',
        userName: '',
        phone: '',
        pid: '',
        sellerName: '',
        userOrderId: '',
        userId: '',
        sellerId: '',
        payTime: '',
        content: '',
        money: '',
        payStatus: '',
        integralPay: '',
        cashPay: '',
        info: '',
        isPass: '',
        checkOrder: '',
        orderTime: '',
        levelProfit: '',
        createTime: '',
        updateTime: '',
        roomCost: '',
        wine: '',
        other: '',
        give: '',
        discount: '',
        total: ''
      }
    }
  }
}
</script>
